<!-- eslint-disable perfectionist/sort-imports -->
<script setup>
import { computed, onMounted, ref } from 'vue';
// eslint-disable-next-line n/no-extraneous-import
import Chart from 'chart.js/auto';

const lineChart = ref(null);
const pieChart = ref(null);

// 使用简单的响应式变量来模拟主题
const isDark = ref(false);

const themeClass = computed(() => (isDark.value ? 'dark' : 'light'));

onMounted(() => {
  // Line Chart initialization
  // eslint-disable-next-line no-new
  new Chart(lineChart.value, {
    type: 'line',
    data: {
      labels: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      datasets: [
        {
          label: '事件',
          data: [4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          borderColor: 'rgb(75, 192, 192)',
          tension: 0.1,
        },
        {
          label: '预警',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          borderColor: 'rgb(255, 99, 132)',
          tension: 0.1,
        },
      ],
    },
    options: {
      responsive: true,
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });

  // Pie Chart initialization
  // eslint-disable-next-line no-new
  new Chart(pieChart.value, {
    type: 'pie',
    data: {
      labels: [
        '火灾应急预案',
        '化学品泄露预案',
        '自然灾害预案',
        '安全事故预案',
        '其他预案',
      ],
      datasets: [
        {
          data: [18, 22, 22, 22, 16],
          backgroundColor: [
            'rgb(54, 162, 235)',
            'rgb(75, 192, 192)',
            'rgb(255, 205, 86)',
            'rgb(255, 99, 132)',
            'rgb(153, 102, 255)',
          ],
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'right',
        },
      },
    },
  });
});
</script>

<template>
  <div :class="[themeClass]" class="agile-emergency-home">
    <h1 class="mb-6 text-2xl font-bold">敏捷应急首页</h1>

    <!-- 预警待办、事件待办、应急预案 横向排列 -->
    <div class="mb-6 grid grid-cols-1 gap-6 md:grid-cols-3">
      <!-- 预警待办 -->
      <div class="card">
        <h2 class="mb-4 text-lg font-semibold">预警待办</h2>
        <div class="rounded-lg bg-orange-400 p-4 text-white">
          <div class="text-4xl font-bold">2</div>
          <div class="text-sm">条</div>
          <div class="mt-2 text-sm">待接收预警</div>
        </div>
      </div>

      <!-- 事件待办 -->
      <div class="card">
        <h2 class="mb-4 text-lg font-semibold">事件待办</h2>
        <div class="space-y-4">
          <div class="rounded-lg bg-red-400 p-4 text-white">
            <div class="text-4xl font-bold">2</div>
            <div class="text-sm">条</div>
            <div class="mt-2 text-sm">待处理事件</div>
          </div>
          <div class="rounded-lg bg-purple-400 p-4 text-white">
            <div class="text-4xl font-bold">5</div>
            <div class="text-sm">条</div>
            <div class="mt-2 text-sm">待评估事件</div>
          </div>
          <div class="rounded-lg bg-blue-400 p-4 text-white">
            <div class="text-4xl font-bold">7</div>
            <div class="text-sm">条</div>
            <div class="mt-2 text-sm">待归档事件</div>
          </div>
        </div>
      </div>

      <!-- 应急预案 -->
      <div class="card">
        <h2 class="mb-4 text-lg font-semibold">应急预案</h2>
        <div class="space-y-4">
          <div class="rounded-lg bg-blue-300 p-4 text-white">
            <div class="text-4xl font-bold">112</div>
            <div class="text-sm">件</div>
            <div class="mt-2 text-sm">预案总数</div>
          </div>
          <div class="rounded-lg bg-indigo-400 p-4 text-white">
            <div class="text-4xl font-bold">22</div>
            <div class="text-sm">件</div>
            <div class="mt-2 text-sm">未评审预案</div>
          </div>
          <div class="rounded-lg bg-blue-500 p-4 text-white">
            <div class="text-4xl font-bold">71</div>
            <div class="text-sm">件</div>
            <div class="mt-2 text-sm">预案发布数</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Main content -->
    <div class="card">
      <div class="mb-8 flex justify-between">
        <h2 class="text-xl font-bold">应急指挥</h2>
        <div class="space-x-4">
          <button class="btn btn-primary">预警待办</button>
          <button class="btn btn-secondary">事件待办</button>
          <button class="btn btn-secondary">统计分析</button>
        </div>
      </div>

      <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
        <!-- Line Chart -->
        <div class="card">
          <h3 class="mb-4 text-lg font-semibold">各月事件及预警信息接受情况</h3>
          <canvas ref="lineChart"></canvas>
        </div>

        <!-- Pie Chart -->
        <div class="card">
          <h3 class="mb-4 text-lg font-semibold">统计分析</h3>
          <canvas ref="pieChart"></canvas>
        </div>

        <!-- Incident Table -->
        <div class="card">
          <div class="mb-4 flex items-center justify-between">
            <h3 class="text-lg font-semibold">处置事件</h3>
            <div class="text-blue-500">26件</div>
          </div>
          <table class="w-full">
            <thead>
              <tr class="bg-muted text-muted-foreground">
                <th class="p-2 text-left">事件类型</th>
                <th class="p-2 text-left">事件子类型</th>
                <th class="p-2 text-left">时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="i in 6" :key="i">
                <td class="p-2">危化车超速</td>
                <td class="p-2">危化车辆超速</td>
                <td class="p-2">2024-06-08 14:23</td>
              </tr>
            </tbody>
          </table>
          <div class="mt-4 flex justify-center">
            <button
              v-for="i in 5"
              :key="i"
              :class="[i === 1 ? 'btn-primary' : 'btn-secondary']"
              class="btn mx-1 rounded px-3 py-1"
            >
              {{ i }}
            </button>
          </div>
        </div>

        <!-- Warning Table -->
        <div class="card">
          <div class="mb-4 flex items-center justify-between">
            <h3 class="text-lg font-semibold">预警事件</h3>
            <div class="text-blue-500">26件</div>
          </div>
          <table class="w-full">
            <thead>
              <tr class="bg-muted text-muted-foreground">
                <th class="p-2 text-left">预警类型</th>
                <th class="p-2 text-left">预警子类型</th>
                <th class="p-2 text-left">时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="i in 6" :key="i">
                <td class="p-2">0404大型火灾</td>
                <td class="p-2">火灾事故</td>
                <td class="p-2">2024-06-08 14:23</td>
              </tr>
            </tbody>
          </table>
          <div class="mt-4 flex justify-center">
            <button
              v-for="i in 5"
              :key="i"
              :class="[i === 1 ? 'btn-primary' : 'btn-secondary']"
              class="btn mx-1 rounded px-3 py-1"
            >
              {{ i }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.agile-emergency-home {
  @apply bg-background text-foreground p-6;
}

.card {
  @apply bg-card text-card-foreground rounded-lg p-6 shadow;
}

.btn {
  @apply rounded px-4 py-2;
}

.btn-primary {
  @apply bg-primary text-primary-foreground;
}

.btn-secondary {
  @apply bg-secondary text-secondary-foreground;
}

/* 暗色主题特定样式 */
.dark .agile-emergency-home {
  @apply bg-background text-foreground;
}

.dark .card {
  @apply bg-card text-card-foreground;
}

.dark .btn-primary {
  @apply bg-primary text-primary-foreground;
}

.dark .btn-secondary {
  @apply bg-secondary text-secondary-foreground;
}
</style>
